﻿<template>
  <div :class = "dialogType ?  'show_content' : ''">
    <el-form v-if = 'pageFormInfo' ref = "dynamicMenuShow" :model = "formLayoutModels" :rules = "rules"
    :label-position = "pageFormInfo.pageConfig.labelPosition" :label-width = "pageFormInfo.pageConfig.labelWidth + 'px'">
      <template v-for = "item in pageFormInfo.list">
        <!-- 栅格布局时 -->
        <template v-if = "item.type == 'grid' && (Object.keys(item.options).indexOf('isHidden') === -1 || !item.options.isHidden)">
          <el-row :key = "item.key" type = "flex" :gutter = "item.options.gutter ? item.options.gutter : 0"
          :justify = "item.options.justify" :align = "item.options.align">
            <el-col v-for = "(col, colIndex) in item.columns" :key = "colIndex" :span = "col.span"
            :class = "(Object.keys(col).indexOf('isButtonGroup') !== -1 && col.isButtonGroup) ? 'el_col_buttonGroup' : ''">
              <template v-for = "citem in col.list">
                <Show-form-item
                @getFormData = 'getFormData' @resetFormData = 'resetFormData'
                @tirggerSelfdefineEventClose = 'tirggerSelfdefineEventClose' @openDialog = 'openDialog'
                @handelRowEvents = 'handelRowEvents' @itemHadChangeModels = 'itemHadChangeModels' @reloadCurrentPage = 'reloadCurrentPage'
                :key = "citem.key" :models.sync = "formLayoutModels" :rules = "rules" :widget = "citem"
                :pageFormInfo.sync = 'pageFormInfo' :dynamicUid = 'dynamicUid' :pageInit = 'pageInit' :changeModels = 'changeModels'
                :dialogType = 'dialogType' :pageRow = 'pageRow' :pPageRow = 'pPageRow' ref = 'pageFormInfoItem'
                :fatherName = 'fatherName'></Show-form-item>
              </template>
            </el-col>
          </el-row>
        </template>
        <!-- tabs标签页时 -->
        <template v-else-if = "item.type == 'tabs' && (Object.keys(item.options).indexOf('isHidden') === -1 || !item.options.isHidden)">
          <el-tabs :type = "item.options.tabType" :stretch = "item.options.stretch" :key="item.key">
            <el-tab-pane v-for = "(tabItem, tabIndex) in item.tabList" :key = "tabIndex" :label = "tabItem.label">
              <template v-for = "el in tabItem.list">
                <!-- 为栅格布局时 -->
                <template v-if = "el.type == 'grid' && (Object.keys(el.options).indexOf('isHidden') === -1 || !el.options.isHidden)">
                  <el-row :key="el.key" type="flex" :gutter="el.options.gutter ? el.options.gutter : 0"
                  :justify = "el.options.justify" :align = "el.options.align">
                    <el-col v-for = "(col, colIndex) in el.columns" :key = "colIndex" :span = "col.span"
                    :class = "(Object.keys(col).indexOf('isButtonGroup') !== -1 && col.isButtonGroup) ? 'el_col_buttonGroup' : ''">
                      <template v-for = "citem in col.list" >
                        <Show-form-item @getFormData = 'getFormData' @resetFormData = 'resetFormData'
                        @tirggerSelfdefineEventClose = 'tirggerSelfdefineEventClose' @openDialog = 'openDialog'
                        @handelRowEvents = 'handelRowEvents' @itemHadChangeModels = 'itemHadChangeModels' @reloadCurrentPage = 'reloadCurrentPage'
                        :key = "citem.key" :models.sync = "formLayoutModels" :rules = "rules" :changeModels = 'changeModels' :pageInit = 'pageInit'
                        :widget = "citem" :pageFormInfo.sync = 'pageFormInfo' :dynamicUid = 'dynamicUid'
                        :dialogType = 'dialogType' :pageRow = 'pageRow' :pPageRow = 'pPageRow' :fatherName = 'fatherName'></Show-form-item>
                      </template>
                    </el-col>
                  </el-row>
                </template>
                <!-- 其它组件 -->
                <template v-else>
                  <Show-form-item @getFormData = 'getFormData' @resetFormData = 'resetFormData'
                  @tirggerSelfdefineEventClose = 'tirggerSelfdefineEventClose' @openDialog = 'openDialog'
                  @handelRowEvents = 'handelRowEvents' @itemHadChangeModels = 'itemHadChangeModels' @reloadCurrentPage = 'reloadCurrentPage'
                  :key = "el.key" :models.sync = "formLayoutModels" :rules = "rules" :widget = "el"
                  :pageFormInfo.sync = 'pageFormInfo' :dynamicUid = 'dynamicUid' :pageInit = 'pageInit' :changeModels = 'changeModels'
                  :dialogType = 'dialogType' :pageRow = 'pageRow' :pPageRow = 'pPageRow' :fatherName = 'fatherName'></Show-form-item>
                </template>
              </template>
            </el-tab-pane>
          </el-tabs>
        </template>
        <template v-else>
          <Show-form-item @getFormData = 'getFormData' @resetFormData = 'resetFormData'
          @tirggerSelfdefineEventClose = 'tirggerSelfdefineEventClose' @openDialog = 'openDialog'
          @handelRowEvents = 'handelRowEvents' @itemHadChangeModels = 'itemHadChangeModels' @reloadCurrentPage = 'reloadCurrentPage'
          :key = "item.key" :models.sync = "formLayoutModels" :rules = "rules" :widget = "item"
          :pageFormInfo.sync = 'pageFormInfo' :dynamicUid = 'dynamicUid' :pageInit = 'pageInit' :changeModels = 'changeModels'
          :dialogType = 'dialogType' :pageRow = 'pageRow' :pPageRow = 'pPageRow' :fatherName = 'fatherName'></Show-form-item>
        </template>
      </template>
    </el-form>
  </div>
</template>

<script src='./metaFormLayoutComponents.js'></script>

<style lang="scss" scoped>
.show_content{
  max-height: 600px;
  overflow-y: auto;
  overflow-x: hidden;
}
@media(max-width: 1367px) {
 .show_content{
    max-height: 320px;
  }
}
</style>
